<template>
  <div id="app-container">
    <el-table
      :data="items"
      stripe
      style="width: 100%">
      <el-table-column type="index" width="50"/>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"/>
      <el-table-column
        prop="intro"
        label="简介"
      />
      <el-table-column
        prop="level"
        label="级别"
        width="100">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.level==1"
            type="primary" >首席讲师</el-tag>
          <el-tag
            v-if="scope.row.level==2"
            type="success" >高级讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="joinDate"
        label="加入时间"/>
      <el-table-column prop="sort" label="排序" width="60" />
    </el-table>
  </div>
</template>
<script>
// 引入需要使用的js组件
import teacherApi from '@/api/teacher'
export default {
  data() {
    return {
      items: [] // 用来接受讲师列表数据
    }
  },
  created() {
    this.getTeacherList()
  },
  // 相当于在vue对象中编写内容
  // 发送axios请求获取讲师列表，显示到elementui中
  // 讲师模块所有的请求都需要访问http://localhost:8110服务器的接口，将所有的CRUD的方法封装到 @/api/teacher.js
  methods: {
    getTeacherList() {
      teacherApi.teacherList()
        .then(response => {
          /**
           * id: "1"
            gmtCreate: "2018-03-30 17:15:57"
            gmtModified: "2019-04-28"
            name: "陈德华"
            intro: "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"
            career: "具备深厚的数学思维功底、丰富的小学教育经验，授课风格生动活泼，擅长用形象生动的比喻帮助理解、简单易懂的语言讲解难题，深受学生喜欢"
            level: 2
            avatar: ""
            sort: 10
            joinDate: "2019-10-29"
            deleted: false
           */
          // console.log(response.data.items)
          this.items = response.data.items
        })
    }
  }
}
</script>
